<route lang="json5">
{
  name: 'TestRoutes',
  path: '/test-routes',
  meta: {
    title: '路由测试页面',
    icon: 'test',
    hidden: false,
  },
}
</route>

<template>
  <div class="test-routes-container">
    <h1>路由测试页面</h1>
    <p>此页面用于测试不同的路由定义方式</p>

    <el-alert
      title="路由定义方式对比"
      type="info"
      description="本页面使用<route>标签定义，对比defineOptions和TSX方式"
      show-icon
    />

    <el-divider />

    <p>路由定义方式：</p>
    <ul>
      <li>route标签方式: <code>&lt;route&gt;标签中定义配置</code></li>
      <li>defineOptions方式: <code>defineOptions({route:{...}})</code></li>
      <li>TSX组件方式: <code>export default {route:{...}}</code></li>
    </ul>

    <el-divider />

    <el-button type="primary" @click="goToRoute('/dashboard-route-tag')">
      查看route标签示例
    </el-button>
    <el-button type="success" @click="goToRoute('/dashboard-options')">
      查看defineOptions示例
    </el-button>
    <el-button type="warning" @click="goToRoute('/dashboard-tsx')"> 查看TSX示例 </el-button>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 导航函数
  const goToRoute = (path: string) => {
    router.push(path);
  };
</script>

<style scoped lang="scss">
  .test-routes-container {
    padding: 20px;

    ul {
      padding-left: 20px;

      li {
        margin-bottom: 10px;
      }
    }

    .el-button {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
</style>
